<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<div xmlns="http://www.w3.org/1999/html" tab-scroll>

    <div ng-hide="sms.id"><h2>Send SMS</h2></div>

     <table>
         <tr>
             <td>
                 <form ng-submit="sendSMS()" id="create-sms" name="smsForm" novalidate
                       select2-blur>
                     <div class="app-form">
                         <div>
                             <div class="form-row clearfix">

                                 <div class="form-cell">
                                     <div>

                                         <label for="fullname">Full Name: <span class="label-required"> *</span></label>

                                         <div class="form-field">
                                             <input ng-model="sms.fullname"  name="fullname" id="fullname" type="text" maxlength="30" width ="320px"
                                                    ng-required="true" />
                                  <span class="field-error" ng-show="sms.fullname.$error.required && showError"
                                        openlmis-message="missing.value">
                                  </span>


                                         </div>
                                     </div>




                                     <div>

                                         <label for="mobile">Phone Number: <span class="label-required"> *</span></label>

                                         <div class="form-field">
                                             <input ng-model="sms.mobile" name="mobile" id="mobile" type="text" maxlength="30" width ="320px"
                                                    ng-required="true"/>
                                  <span class="field-error" ng-show="sms.mobile.$error.required && showError"
                                        openlmis-message="missing.value">
                                  </span>


                                         </div>
                                     </div>

                                     <div>
                                         <label for="content">Text SMS: </label>

                                         <div class="form-field">
                                             <textarea style="width:350px" ng-model="sms.content" name="content" id="content"
                                                       type="text" maxlength="200" rows="5"
                                                       ng-required="false"></textarea>
                                         </div>
                                     </div>


                                     <div form-toolbar id="action_buttons" class="action-buttons">
                                         <div class="form-cell button-row">
                                             <input type="submit" class="btn btn-primary save-button" value="Send SMS"/>
                                             <a ng-href="#/list" class="btn btn-cancel cancel-button"><span
                                                     openlmis-message="button.cancel"></span></a>

                                         </div>
                                         <div class="toolbar-success" ng-show="message">{{ message }}</div>
                                     </div>
                                 </div>
                             </div>
                         </div>

                     </div>
                 </form>
             </td>
             <td>
                 <table class="table" ng-show="list.length > 0" align="right">
                     <tr>
                       <th>Direction</th>
                       <th>Date</th>
                       <th>Message</th>
                     </tr>
                      <tr ng-repeat="item in list">
                          <td>{{item.direction}}</td>
                          <td>{{item.dateSaved |date:'medium'}}</td>
                          <td>{{item.message}}</td>
                      </tr>
                 </table>
             </td>
         </tr>
     </table>

</div>


